<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" class="digital_report_qr">
    <div class="digital_report_qr_left">
      <Common-Slider-Bar
        ref="silderBar"
        :item-view-option="{
          itemTitle: 'PROGRAMNAME2',
          key: 'ID',
          menuTitle: 'PROGRAMNAME2'
        }"
        :search-key="'PROGRAMNAME2'"
        :request="{
          url: url + '/dynamicReportForm/queryBodyByProduce',
          method: 'post',
          data: searchData
        }"
        :input-value="inputValue"
        @select="menuChange"
        @fatherSelct="menuChangeFather"
      />
    </div>
    <div class="digital_report_qr_content">
      <div class="top">
        <Skeleton v-if="loading" />
        <template v-if="projectLevelOne">
          <div class="top_left">
            <div class="top_left_qr">
              <vue-qr :text="qrUrlOne" :size="254" />
              <div class="project-info">
                <project-info
                  :project-info="projectInfo"
                  :title="projectTitle"
                  :project-center="projectCenter"
                  :content="content"
                />
              </div>
            </div>
          </div>
          <div class="top_right">
            <project-data :project-data="projectData" />
          </div>
        </template>
        <template v-else>
          <div class="top_left_two">
            <div class="card_left">
              <div class="card_con_left">
                <div class="card_left_title">
                  <img src="@/assets/img/specialHome/项目.png" alt="">
                  <p @click="openSteps">
                    {{ projectTitle }}
                  </p>
                  <!-- <span @click="openSteps">项目日志</span> -->
                </div>
                <div class="card_left_bot">
                  <div
                    v-for="(item, index) in leftCardList"
                    :key="index"
                    class="Item_left"
                  >
                    <span>{{ item.title }}</span>
                    <p>{{ item.num }}</p>
                  </div>
                </div>
              </div>
              <div class="card_con_right">
                <div class="btn_top">
                  <div class="task_record">
                    <el-popover
                      v-model="taskRecardShow"
                      placement="bottom"
                      trigger="manual"
                    >
                      <My-Task-Recard
                        :visible="taskRecardShow"
                        :model-id="modelId"
                        :item="leftMuneRow"
                        :left-card-list="leftCardList"
                        :project-title="projectTitle"
                      />
                      <span
                        v-if="false"
                        slot="reference"
                        @click="openTaskRecardShow"
                      >
                        <a-icon
                          style="margin-right: 5px;"
                          type="profile"
                        />任务记录
                      </span>
                    </el-popover>
                  </div>
                  <div style="width: 100%;text-align: right;margin-left: 10px;">
                    <el-button
                      type="primary"
                      size="medium"
                      @click="taskCreatBtn"
                    >一触预警</el-button>
                  </div>
                </div>
                <div class="ermabox">
                  <div class="ermaCon">
                    <vue-qr :text="qrUrlTwo" :size="254" />
                    <span>项目二维码</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="card_right">
              <div class="card_right_top">
                <div class="card_right_top_title">
                  <img src="@/assets/img/specialHome/风险.png" alt="">
                  <p>任务列表</p>
                </div>
                <el-button
                  type="primary"
                  size="medium"
                  @click="taskCreatClick"
                >任务发布</el-button>
              </div>
              <div class="card_right_bot">
                <!-- <div
                  v-for="(it, i) in rightCardList"
                  :key="i"
                  class="item_right"
                >
                  <p>{{ it.title }}</p>
                  <span>立即办理</span>
                </div> -->
                <dv-scroll-board
                  :config="config"
                  style="height:95%;color:#0169D4;border-radius: 4px;overflow: hidden;"
                  @click="openMoney"
                />
                <div
                  v-show="config.data && !config.data.length"
                  class="form-empty"
                >
                  <a-empty description="暂无数据" />
                </div>
                <!-- <el-table
                  ref="table"
                  :header-cell-style="{
                    color: '#0169D4',
                    background: 'rgba(50, 197, 255,0.15)',
                    textAlign: ' center',
                    height: '50px'
                  }"
                  :data="fxtableData"
                  :cell-style="{
                    color: '#32c5ff',
                    textAlign: 'center',
                    fontSize: '12px',
                    background: 'rgba(0,0,0,0.00)'
                  }"
                  style="width: 100%;border-radius: 8px;"
                  height="93%"
                >
                  <el-table-column prop="FXD" label="风险点" />
                  <el-table-column prop="FXFL" label="风险分类" />
                  <el-table-column prop="KZZRG" label="控制责任岗" />
                  <el-table-column prop="FXJB" label="风险级别" />
                  <el-table-column prop="CFSJ" label="触发时间" />
                  <el-table-column label="操作">
                    <template slot-scope="{ row }">
                      <span @click="openDaign(row)">风险处置</span>
                    </template>
                  </el-table-column>
                </el-table> -->
              </div>
            </div>
            <!-- <div class="top_left_qr_two">
              <vue-qr :text="qrUrlTwo" :size="254" />
              <div class="project_two">
                <project-info-two
                  :title="projectTitle"
                  :list="projectTwoList"
                  @taskCreat="taskCreatBtn"
                  @taskList="taskListBtn"
                />
              </div>
            </div> -->
          </div>
        </template>
      </div>
      <div class="echarts">
        <Skeleton v-if="chartLoading" />
        <template v-if="projectLevelOne">
          <projecte-charts :title="projectTitle" :mouth-data="mouthData" />
        </template>
        <template v-else>
          <table-common
            ref="tableCommonRef"
            :menu-id="menuId"
            :filter-list="filterList"
          />
        </template>
      </div>
    </div>

    <task-form-creat
      ref="taskCreatRef"
      :user-list="userList"
      :model-id="modelId"
      :visible.sync="taskFormCreatVisible"
    />

    <el-dialog
      title="任务管理"
      :visible.sync="taskListVisible"
      append-to-body
      width="60%"
      :before-close="handleCloseList"
    >
      <task-table
        v-model="taskListSearchParams"
        :task-list="taskList"
        :total="total"
        :loading="tableLoading"
        @taskListSearch="taskListSearch"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="taskListCancel">取 消</el-button>
        <el-button type="primary" @click="taskListCancel">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <task-details
      :task-info="taskInfo"
      :dialog-visible="taskDialogVisible"
      @closeTaskDetail="taskDialogVisible = false"
    /> -->
    <el-dialog
      title="风险处置"
      :visible.sync="fxDialogVisible"
      append-to-body
      width="800px"
      :before-close="fxDialogClose"
    >
      <div>
        <el-row v-for="(fxIt, fxIndex) in fxList" :key="fxIndex" :gutter="20">
          <el-col :span="12">
            <div class="rowBoxfx">
              <span>{{ fxIt.label1 }}</span>
              <p v-if="fxIt.label1 === '处理状态'">
                <el-radio
                  v-model="processStatusRadio"
                  label="已处理"
                >是</el-radio>
                <el-radio
                  v-model="processStatusRadio"
                  label="未处理"
                >否</el-radio>
              </p>
              <p v-else-if="fxIt.label1 === '处理日期'">
                <el-date-picker
                  v-model="CLSJ"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择处理日期"
                />
              </p>
              <p v-else>{{ rowFxData[fxIt.num1] }}</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="rowBoxfx">
              <span>{{ fxIt.label2 }}</span>
              <p v-if="fxIt.label2 === '备注'">
                <el-input v-model="BZSMInput" placeholder="请输入内容" />
              </p>
              <p v-if="fxIt.label2 !== '备注'">{{ rowFxData[fxIt.num2] }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="fxDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="fxDialogSure">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog :visible.sync="YJDialogVisible" append-to-body width="800px">
      <!-- <div>
      <slot name="title">123</slot>
    </div> -->
      <template slot="title">
        <div>
          <img src="@/assets/img/specialHome/风险.png" alt="">
          <span style="font-size:18px;margin-left:5px">一触预警</span>
        </div>
      </template>
      <!-- <div class="YjText">截止当前,该项目未发现新风险</div> -->
      <early-loading v-if="YJDialogVisible" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="YJDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="YJDialogSure">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      :title="tableItemTitle"
      :visible.sync="stepsVisible"
      append-to-body
      width="1100px"
      class="itemDialog"
    >
      <div v-if="flagDialog === 1">
        <tableTemplate
          :table1="tableList1"
          :headers-list="tableHeaderData.list1"
        />
      </div>
      <div v-if="flagDialog === 2" class="itmeMore">
        <div style="width:10%">
          <el-steps direction="vertical" :active="4">
            <el-step title="资金" />
            <el-step title="支付" />
            <el-step title="监管" />
            <el-step title="资料" />
          </el-steps>
        </div>
        <div style="width:87%">
          <div class="tableItem">
            <tableTemplate
              :table1="tableList.list1"
              :headers-list="tableHeaderData.list2"
            />
          </div>
          <div class="tableItem">
            <tableTemplate
              :table1="tableList.list2"
              :headers-list="tableHeaderData.list3"
            />
          </div>
          <div class="tableItem">
            <tableTemplate
              :table1="tableList.list3"
              :headers-list="tableHeaderData.list4"
            />
          </div>
          <div class="tableItem">
            <tableTemplate
              :table1="tableList.list4"
              :headers-list="tableHeaderData.list5"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="stepsVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CommonSliderBar from '@/components/CommonSliderBar';
import MyTaskRecard from '@/views/digitalReportQr1/components/MyTaskRecard';
import { getUserList, releaseTask, getTaskList } from '@/api/user';
import { getToken } from '@/utils/auth.js';
import tableCommon from '@/components/tableCommon/index.vue';
import ProjectInfo from './components/ProjectInfo.vue';
// import ProjectInfoTwo from './components/ProjectInfoTwo.vue';
import ProjectData from './components/ProjectData.vue';
import Skeleton from '@/components/Skeleton/index.vue';
import EarlyLoading from './components/EarlyLoading.vue';
// 先写死
// import TaskFormCreat from './components/TaskFormCreat.vue';
import TaskFormCreat from './components/TaskCreat.vue';
import TaskTable from './components/TaskTable.vue';
import ProjecteCharts from './components/ProjecteCharts.vue';
import baseUrl from '@/utils/processRequest1';
import { uploadMulti } from '@/api/file';
import vueQr from 'vue-qr';
import debounce from 'lodash/debounce';
import { getGlobal } from '@/utils/global';
import { getQueryBodyByProduce } from '@/api/dynamicInterface';
import tableTemplate from './components/tableTemplate/tableMe.vue';
import { saveDynamicForm } from '@/api/formConfig';
// import TaskDetails from "../digitalReportQr1/components/TaskDetails.vue";

export default {
  components: {
    CommonSliderBar,
    vueQr,
    ProjectInfo,
    // ProjectInfoTwo,
    ProjectData,
    ProjecteCharts,
    tableCommon,
    Skeleton,
    TaskFormCreat,
    TaskTable,
    MyTaskRecard,
    tableTemplate,
    EarlyLoading
  },
  data() {
    return {
      tableItemTitle: '',
      tableList1: [],
      tableList: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      },
      tableHeaderData: {
        list1: {
          data: [
            {
              ZD: 'FQR',
              label: '发起人'
            },
            {
              ZD: 'RWFL',
              label: '任务分类'
            },
            {
              ZD: 'WTMS',
              label: '任务描述'
            },
            {
              ZD: 'JSR',
              label: '接收人'
            },
            {
              ZD: 'FQSJ',
              label: '发起时间'
            },
            {
              ZD: 'YWCL',
              label: '巡查时间'
            },
            {
              ZD: 'XCWTGS',
              label: '巡查问题个数'
            },
            {
              ZD: 'XCZTMS',
              label: '	巡查总体描述'
            },
            {
              ZD: 'XMXCPJ',
              label: '项目巡查评价'
            },
            {
              ZD: 'PROGRAMCODE2',
              label: '项目编码'
            }
          ]
        },
        list2: {
          title: '资金来源',
          data: [
            {
              ZD: 'ZYZJ',
              label: '中央资金'
            },
            {
              ZD: 'SJZJ',
              label: '省级资金'
            },
            {
              ZD: 'SJZJS',
              label: '市级资金'
            },
            {
              ZD: 'QJZJ',
              label: '区级资金'
            },
            {
              ZD: 'ZCZJ',
              label: '自筹资金'
            }
          ]
        },
        list3: {
          title: '执行明细',
          data: [
            {
              ZD: 'RQ',
              label: '日期'
            },
            {
              ZD: 'SKR',
              label: '收款人'
            },
            {
              ZD: 'JE',
              label: '金额'
            },
            {
              ZD: 'FQR',
              label: '发起人'
            },
            {
              ZD: 'SQR',
              label: '审批人'
            },
            {
              ZD: 'ZFR',
              label: '支付人'
            }
          ]
        },
        list4: {
          title: '监管反馈',
          data: [
            {
              ZD: 'RWGS',
              label: '任务个数'
            },
            {
              ZD: 'YJGS',
              label: '预警个数'
            },
            {
              ZD: 'YZG',
              label: '已整改'
            },
            {
              ZD: 'WZG',
              label: '未整改'
            }
          ]
        },
        list5: {
          title: '附件数量',
          data: [
            {
              ZD: 'WJFJ',
              label: '文件附件'
            },
            {
              ZD: 'HTFJ',
              label: '合同附件'
            },
            {
              ZD: 'ZFFJ',
              label: '支付附件'
            }
          ]
        }
      },
      flagDialog: 0,
      modelId: 61,
      taskRecardShow: false,
      url: '',
      searchData: {},
      projectInfo: {},
      content: '',
      projectTitle: '',
      projectCenter: [],
      projectData: [],
      projectLevelOne: true,
      loading: true,
      chartLoading: true,
      mouthData: [],
      projectTwoList: [],
      menuId: undefined,
      filterList: [],
      qrUrlTwo: '',
      qrUrlOne: '',
      taskFormCreatVisible: false,
      taskCreat: {},
      userList: [],
      fullscreenLoading: false,
      taskListVisible: false,
      taskList: [],
      taskListSearchParams: {},
      total: 0,
      leftMuneRow: {},
      tableLoading: false,
      qrUrl: '',
      operator: '',
      leftCardList: [
        {
          title: '预算数：',
          num: '',
          ziduan: 'YSMX_YSJE'
        },
        {
          title: '项目编号：',
          num: '',
          ziduan: 'PROGRAMCODE2'
        },
        {
          title: '已拨付：',
          num: '',
          ziduan: 'PAYMONEY'
        },
        {
          title: '执行部门：',
          num: '',
          ziduan: 'DEPARTMENTNAME'
        },
        {
          title: '未拨付：',
          num: '',
          ziduan: 'WBF'
        },
        {
          title: '项目负责人：',
          num: '',
          ziduan: 'XMFZR'
        },
        {
          title: '资金使用率：',
          num: '',
          ziduan: 'RATE'
        },
        {
          title: '经办人：',
          num: '',
          ziduan: 'XMJBR'
        }
      ],
      rightCardList: [
        {
          title: '风险点提醒文案，风险点提醒文案，风险点提醒文案'
        },
        {
          title: '风险点提醒文案，风险点提醒文案，风险点提醒文案'
        },
        {
          title: '风险点提醒文案，风险点提醒文案，风险点提醒文案'
        },
        {
          title: '风险点提醒文案，风险点提醒文案，风险点提醒文案'
        }
      ],
      fxtableData: [],
      fxDialogVisible: false,
      fxList: [
        {
          label1: '项目编码',
          label2: '项目名称',
          num1: 'PROGRAMCODE2',
          num2: 'PROGRAMNAME2'
        },
        {
          label1: '风险类型',
          label2: '风险点',
          num1: 'FXLX',
          num2: 'FXD'
        },
        {
          label1: '责任部门',
          label2: '产生日期',
          num1: 'KZZRG',
          num2: 'CFSJ'
        },
        {
          label1: '处理状态',
          label2: '备注',
          num1: 'CLZT',
          num2: 'BZSM'
        },
        {
          label1: '处理日期',
          label2: '处理人',
          num1: 'CLSJ',
          num2: 'CLR'
        }
      ],
      rowFxData: [],
      processStatusRadio: '',
      // 风险处置的备注说明
      BZSMInput: '',
      CLSJ: '',
      config: {
        // header: ["资金来源", "金额", "进度"],
        // data: [
        //   ["中央资金", "782500", "0%"],
        //   ["省级资金", "156500", "0%"],
        //   ["市级资金", "0", "0%"],
        //   ["区级资金", "1012700", "100%"],
        //   ["本级资金", "0", "0%"]
        // ],
        // headerBGC: "rgba(50, 197, 255,0.15)",
        // evenRowBGC: "rgba(0,0,0,0.00)",
        // oddRowBGC: "rgba(0,0,0,0.00)",
        // align: ["center", "center", "center"],
        // waitTime: 5000,
        // rowNum: 5
      },
      YJDialogVisible: false,
      inputValue: '',
      stepsVisible: false
    };
  },
  watch: {
    'taskListSearchParams.pageIndex': {
      handler(obj) {
        this.getTaskList();
      }
    },
    'taskListSearchParams.pageSize': {
      handler(obj) {
        this.getTaskList();
      }
    }
  },
  created() {
    this.getTaskList = debounce(this.getTaskList, 300);
    this.operator = localStorage.getItem('xcUserId');
    this.getSearchData();
    this.init();
    this.getUserList();
    this.getQrUrl();
  },
  methods: {
    openMoney({ row }) {
      this.flagDialog = 1;
      this.stepsVisible = true;
      this.tableItemTitle = '任务列表详情';
      getQueryBodyByProduce({
        pageIndex: 0,
        pageSize: 100,
        tableId: 971,
        pageType: 1,
        filterList: [{ col: 'WTMS', value: row[2] }]
      }).then(res => {
        if (res.success && res.data.length) {
          this.tableList1 = res.data;
        }
      });
    },
    openDaign(val) {
      this.rowFxData = { ...val };
      // 风险处理的处理状态,备注,日期和处理人
      this.processStatusRadio = this.rowFxData.CLZT || '未处理';
      this.BZSMInput = this.rowFxData.BZSM || '';
      this.CLSJ = this.rowFxData.CLSJ || '';
      this.fxDialogVisible = true;
    },
    openTaskRecardShow() {
      this.taskRecardShow = !this.taskRecardShow;
    },
    openSteps() {
      this.tableItemTitle = '项目日志';
      this.flagDialog = 2;
      this.stepsVisible = true;
      this.tableList.list1 = [
        {
          ZYZJ: '782500.00',
          SJZJ: '156500.00',
          SJZJS: 0,
          QJZJ: '1012700.00',
          ZCZJ: 0
        }
      ];
      this.tableList.list2 = [
        {
          RQ: '2021-2-8',
          SKR: '绍兴市柯桥区齐贤街道丈午股份经济合作社',
          JE: '432796.00',
          FQR: '陈宇飞',
          SQR: '胡伟炎',
          ZFR: '徐小飞'
        },
        {
          RQ: '2021-2-8',
          SKR: '绍兴市柯桥区齐贤街道光明股份经济合作社',
          JE: '372625.00',
          FQR: '陈宇飞',
          SQR: '胡伟炎',
          ZFR: '徐小飞'
        },
        {
          RQ: '2021-2-8',
          SKR: '绍兴市柯桥区齐贤街道朝阳股份经济合作社',
          JE: '246617.00',
          FQR: '陈宇飞',
          SQR: '胡伟炎',
          ZFR: '徐小飞'
        }
      ];
      this.tableList.list3 = [
        {
          RWGS: 4,
          YJGS: 2,
          YZG: 2,
          WZG: 0
        }
      ];
      this.tableList.list4 = [
        {
          WJFJ: 3,
          HTFJ: 0,
          ZFFJ: 5
        }
      ];
    },
    init() {
      baseUrl().then(res => {
        this.url = res.url;
        this.$nextTick(() => {
          this.$refs.silderBar.send();
          // 默认搜索
          this.inputValue = '农田';
        });
      });
    },
    defaultValue(dataObj) {
      this.leftCardList.forEach(item => {
        for (const key in dataObj) {
          if (item.ziduan === key) {
            item.num = dataObj[key];
          }
        }
      });
    },
    menuChange(obj) {
      const { value } = obj;
      this.getProjectData(value);
    },
    menuChangeFather(obj) {
      const { value } = obj;
      this.getProjectData(value);
    },
    getSearchData() {
      const { PROGRAMNAME2 } = this.$route.query;
      this.searchData = {
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 583,
        resultAsTree: true,
        operator: this.operator,
        // operator: '',
        filterList: []
      };
      if (PROGRAMNAME2) {
        this.searchData.filterList.push({
          col: 'PROGRAMNAME2',
          value: PROGRAMNAME2,
          symbol: 'eq'
        });
      }
    },
    getProjectData(value) {
      this.taskRecardShow = false;
      this.leftMuneRow = value;
      // Number(value.PID) ? this.getProjectDataTwoLevel(value) : this.getProjectDataOneLevel(value);
      // console.log(value);
      // 一级项目
      value.LEVEL_NUM === 2 ? this.getProjectDataTwoLevel(value) : undefined;
      // 二级项目
      !value.children && value.LEVEL_NUM !== 2
        ? this.getProjectDataTwoLevel(value)
        : undefined;
    },
    getQrUrl() {
      getGlobal().then(all => {
        // console.log(all);
        this.qrUrl = all.res.data.qrUrl;
      });
    },
    // 一级项目
    async getProjectDataOneLevel(value) {
      const { PROGRAMCODE, PROGRAMNAME } = value;
      this.projectTitle = PROGRAMNAME;
      this.qrUrlTwo = `${
        this.qrUrl
      }?filter=PROGRAMCODE,${PROGRAMCODE}&data=tableId,585&token=1&menuId=1624435828446`;
      this.projectLevelOne = true;
      await this.getQueryBodyByProduce({
        pageIndex: 0,
        pageSize: 10,
        pageType: 1,
        tableId: 584,
        filterList: [{ col: 'PROGRAMCODE', value: PROGRAMCODE, symbol: 'eq' }]
      });
      this.getChartsData({
        pageIndex: 0,
        pageSize: 10,
        pageType: 1,
        tableId: 585,
        filterList: [{ col: 'PROGRAMCODE', value: PROGRAMCODE, symbol: 'eq' }]
      });
    },
    // 二级项目
    async getProjectDataTwoLevel(value) {
      const { PROGRAMNAME2, ID } = value;
      this.taskCreat.PROGRAMCODE2 = ID;
      this.taskCreat.PROGRAMNAME2 = PROGRAMNAME2;
      this.projectTitle = PROGRAMNAME2;
      this.projectLevelOne = false;
      // 一级项目
      if (value.LEVEL_NUM === 2) {
        this.menuId = 1628214525383;
        this.filterList = [{ col: 'PROGRAMCODE', value: ID, symbol: 'eq' }];
        this.qrUrlTwo = `${this.qrUrl}?filter=PROGRAMCODE2,${
          value.ID
        }&data=tableId,588&token=1&menuId=1628214525383&levelNum=1`;
      } else {
        this.menuId = 1624435828446;
        this.filterList = [{ col: 'PROGRAMCODE2', value: ID, symbol: 'eq' }];
        this.qrUrlTwo = `${this.qrUrl}?filter=PROGRAMCODE2,${
          value.ID
        }&data=tableId,588&token=1&menuId=1624435828446&levelNum=2`;
      }

      await this.getQueryBodyByProduceTwo({
        pageIndex: 0,
        pageSize: 10,
        pageType: 1,
        tableId: 588,
        filterList: [
          { col: 'PROGRAMCODE2', value: ID, symbol: 'eq' }
          // { col: 'PROGRAMCODE2', value: PROGRAMCODE2, symbol: 'eq' }
        ]
      });
      this.getRightList(ID);
      this.chartLoading = false;
    },
    async getQueryBodyByProduce(data) {
      this.loading = true;
      await getQueryBodyByProduce(data).then(res => {
        const { success, data } = res;
        if (success && data) {
          const {
            DEPARTMENTNAME,
            WJYJ_XMQSSJ,
            WJYJ_XMZZSJ,
            WJYJ_XMLB,
            WJYJ_XMZJE,
            PAYMONEY,
            WBFS,
            ZJSYL,
            WJYJ_XMNR
          } = data[0];
          this.projectCenter = [
            { name: '所属部门', content: DEPARTMENTNAME },
            { name: '开始时间', content: WJYJ_XMQSSJ },
            { name: '结束时间', content: WJYJ_XMZZSJ },
            { name: '项目类别', content: WJYJ_XMLB }
          ];
          this.projectData = [
            {
              title: '总预算数',
              svg: 'areaChart',
              unit: true,
              num: WJYJ_XMZJE
            },
            { title: '已拨付数', svg: 'lineChart', unit: true, num: PAYMONEY },
            { title: '未拨付数', svg: 'barChart', unit: true, num: WBFS },
            { title: '资金使用率', svg: 'pointMap', unit: false, num: ZJSYL }
          ];
          this.content = WJYJ_XMNR;
          this.loading = false;
        }
      });
    },
    async getQueryBodyByProduceTwo(data) {
      this.loading = true;
      await getQueryBodyByProduce(data).then(res => {
        const { success, data } = res;
        if (success && data) {
          const { YSMX_YSJE, PAYMONEY, WBF, RATE } = data[0];
          this.projectTwoList = [
            { title: '预算数', num: YSMX_YSJE, change: true },
            { title: '已拨付', num: PAYMONEY, change: true },
            { title: '未拨付', num: WBF, change: true },
            { title: '资金使用率', num: RATE, change: false }
          ];
          this.defaultValue(data[0]);
          this.loading = false;
        }
      });
    },
    async getChartsData(value) {
      this.chartLoading = true;
      await getQueryBodyByProduce(value).then(res => {
        const { success, data } = res;
        if (success && data) {
          this.chartLoading = false;
          this.mouthData = [];
          this.mouthData.length = 12;
          data.forEach(item => {
            const index = Number(item.ZFYF) - 1;
            this.mouthData[index] = item.ZC;
          });
        }
      });
    },

    // 风险列表
    async getRightList(id) {
      await getQueryBodyByProduce({
        pageIndex: 0,
        pageSize: 10,
        pageType: 1,
        tableId: 971,
        filterList: [
          { col: 'PROGRAMCODE2', value: id, symbol: 'eq' }
          // { col: 'PROGRAMCODE2', value: PROGRAMCODE2, symbol: 'eq' }
        ]
      }).then(res => {
        if (res.data) {
          // this.fxtableData = res.data;
          const arr = [];
          res.data.forEach(item => {
            arr.push([item.FQR, item.RWFL, item.WTMS, item.XCZTMS]);
          });
          this.config = {
            header: ['发起人', '任务分类', '任务描述', '巡查总体描述'],
            data: arr,
            headerBGC: 'rgba(50, 197, 255,0.15)',
            evenRowBGC: 'rgba(0,0,0,0.00)',
            oddRowBGC: 'rgba(0,0,0,0.00)',
            align: ['center', 'center', 'center', 'center'],
            columnWidth: [150, 200, 280, 350],
            waitTime: 5000,
            rowNum: 4
          };
        } else {
          // this.fxtableData = [];
          const arr = [];
          this.config = {
            header: ['资金来源', '金额', '进度'],
            data: arr,
            headerBGC: 'rgba(50, 197, 255,0.15)',
            // evenRowBGC: "rgba(0,0,0,0.00)",
            // oddRowBGC: "rgba(0,0,0,0.00)",
            align: ['center', 'center', 'center']
            // waitTime: 5000,
            // rowNum: 3
          };
        }
      });
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.taskFormCreatCancel();
        })
        .catch(_ => {});
    },

    taskCreatBtn() {
      // 打开任务发布弹窗
      // this.taskFormCreatVisible = true;
      // this.$message.success('截止当前,该项目未发现新风险');
      // 跳到风险列表;
      this.YJDialogVisible = true;
    },

    taskCreatClick() {
      // 打开任务发布弹窗
      this.taskFormCreatVisible = true;
    },

    YJDialogSure() {
      this.YJDialogVisible = false;
      this.$refs.tableCommonRef.tabsIndexChange('9');
    },
    getUserList() {
      getUserList({}).then(res => {
        const { success, data } = res;
        if (success && data.length) {
          this.userList = data;
        } else {
          this.userList = [];
        }
      });
    },

    taskFormCreatCancel() {
      const { PROGRAMCODE2, PROGRAMNAME2 } = this.taskCreat;
      this.taskCreat = {
        PROGRAMCODE2,
        PROGRAMNAME2
      };
      this.$refs.taskCreatRef.clearFileList();
      this.taskFormCreatVisible = false;
    },

    async taskFormCreadSure() {
      this.fullscreenLoading = true;
      const {
        name,
        people,
        note,
        fileList,
        PROGRAMCODE2,
        PROGRAMNAME2
      } = this.taskCreat;
      const userList = [];
      people &&
        people.length &&
        people.forEach(item => {
          userList.push({
            trueName: item.true_name,
            telephone: item.telephone
          });
        });
      const obj = {
        taskName: name || '',
        remark: note || '',
        userId: getToken('xcUserId'),
        userList,
        PROGRAMCODE2,
        PROGRAMNAME2
      };
      await releaseTask(obj).then(async res => {
        const {
          message,
          success,
          data: { id }
        } = res;
        if (success && id) {
          if (fileList.length) {
            const { success, message } = await this.fileUpload(fileList, id);
            !success && this.$message.error(message);
          }
          this.taskFormCreatCancel();
          this.$message.success(message);
        } else {
          this.$message.error(message);
        }
      });
      this.fullscreenLoading = false;
    },
    // 附件上传
    fileUpload(arr, id) {
      return new Promise((resolve, reject) => {
        const upfileRequest = new FormData();
        for (let i = 0; i < arr.length; i++) {
          upfileRequest.append('files', arr[i].raw);
        }
        upfileRequest.append('guid', id);
        upfileRequest.append('type', 'FJ01');
        uploadMulti(upfileRequest).then(res => {
          resolve(res);
        });
      });
    },
    taskListBtn() {
      this.taskListVisible = true;
      this.taskListSearchParams = {
        userId: getToken('xcUserId'),
        pageIndex: 1,
        pageSize: 10,
        PROGRAMCODE2: this.leftMuneRow.ID
      };
      // this.getTaskList(this.taskListSearchParams);
    },
    async getTaskList() {
      if (JSON.stringify(this.taskListSearchParams) === '{}') return;
      this.tableLoading = true;
      await getTaskList(this.taskListSearchParams).then(res => {
        const { success, data, message, total } = res;
        if (success && data.length) {
          data.map(item => {
            const nameList = [];
            item.receiver &&
              item.receiver.length &&
              item.receiver.forEach(v => nameList.push(v.trueName));
            item.name = nameList.join(',');
          });
          this.taskList = data;
          this.total = total;
        } else {
          this.taskList = [];
          this.$message.error(message);
          this.total = 0;
        }
      });
      this.tableLoading = false;
    },
    taskListSearch() {
      this.taskListSearchParams.pageIndex = 1;
      this.getTaskList();
    },
    handleCloseList(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.taskListCancel();
        })
        .catch(_ => {});
    },
    fxDialogClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    taskListCancel() {
      this.taskListVisible = false;
      this.taskListSearchParams = {};
      this.taskList = [];
    },
    fxDialogSure() {
      // 风险处置确定按钮
      const updataObj = {};
      const CLR = localStorage.getItem('xcNickName');
      this.processStatusRadio !== this.rowFxData.CLZT &&
        (updataObj.CLZT = this.processStatusRadio);
      this.BZSMInput !== this.rowFxData.BZSM &&
        (updataObj.BZSM = this.BZSMInput);
      this.CLSJ !== this.rowFxData.CLSJ && (updataObj.CLSJ = this.CLSJ);
      CLR !== this.rowFxData.CLR && (updataObj.CLR = CLR);
      if (JSON.stringify(updataObj) !== '{}') {
        const requset = {
          formGuid: this.rowFxData.FORMGUID,
          bodyData: [
            {
              data: [
                {
                  ...updataObj,
                  rowNum: this.rowFxData.ROW_NUM,
                  option: 'update',
                  tableId: 715
                }
              ],
              tableId: 715
            }
          ]
        };
        saveDynamicForm(requset).then(res => {
          const { success, message } = res;
          if (success) {
            this.$message.success(message);
            this.fxDialogVisible = false;
          } else {
            this.$message.error(message);
          }
          this.getRightList(this.taskCreat.PROGRAMCODE2);
        });
      } else {
        this.fxDialogVisible = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
/*像素转换相对单位vw*/
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.digital_report_qr {
  height: 100%;
  display: flex;
  .digital_report_qr_left {
    width: 16%;
    // height: calc(100% - 75px);
    background: #ffffff;
  }
  .digital_report_qr_content {
    background-color: #e6e9f0;
    padding: 24px 23px 22px 24px;
    height: 100%;
    flex: 1;
    position: relative;
    width: 84%;
    .top {
      position: relative;
      height: 278px;
      display: flex;
      padding-bottom: 24px;
      .top_left {
        width: 45%;
        background: #fff;
        border-radius: 4px;
        .top_left_qr {
          height: 100%;
          display: flex;
          width: 100%;
          .project-info {
            width: calc(100% - 254px);
            padding: 23px 20px 23px 0;
          }
        }
      }
      .top_right {
        width: 55%;
        padding-left: 24px;
      }
      .top_left_two {
        width: 100%;
        // background: #fff;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        .card_left {
          width: 49%;
          background: #ffffff;
          border-radius: 4px;
          display: flex;
          .card_con_left {
            width: 75%;
            height: 100%;
            .card_left_title {
              height: 24%;
              display: flex;
              align-items: center;
              padding-left: px2vw(20px);
              img {
                width: px2vw(26px);
                height: px2vw(26px);
              }
              p {
                margin: 0;
                font-size: 18px;
                font-family: PingFangSC, PingFangSC-Medium;
                font-weight: 500;
                text-align: left;
                color: #1492ff;
                margin-left: px2vw(12px);
                cursor: pointer;
                text-decoration: underline;
              }
              span {
                margin: 0;
                font-size: 18px;
                font-family: PingFangSC, PingFangSC-Medium;
                font-weight: 500;
                text-align: left;
                color: #1492ff;
                margin-left: px2vw(20px);
                cursor: pointer;
              }
            }
            .card_left_bot {
              height: 70%;
              display: flex;
              flex-wrap: wrap;
              padding-left: px2vw(20px);
              .Item_left {
                width: 50%;
                display: flex;
                align-items: center;
                span {
                  width: 40%;
                  font-size: px2vw(14px);
                  font-family: PingFangSC, PingFangSC-Regular;
                  font-weight: 400;
                  color: #999999;
                }
                p {
                  width: 60%;
                  font-size: px2vw(14px);
                  font-family: PingFangSC, PingFangSC-Regular;
                  font-weight: 400;
                  color: #333333;
                  margin: 0;
                }
              }
            }
          }
          .card_con_right {
            width: 35%;
            height: 100%;
            padding-right: px2vw(20px);
            .btn_top {
              height: 24%;
              display: flex;
              align-items: center;

              .task_record {
                color: #1492ff;
                width: 250px;
                cursor: pointer;
              }
            }
            .ermabox {
              height: 76%;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              .ermaCon {
                display: flex;
                flex-direction: column;
                justify-content: center;
                img {
                  width: px2vw(120px);
                  height: px2vw(120px);
                  cursor: pointer;
                  &:hover {
                    position: fixed;
                    width: px2vw(600px);
                    height: px2vw(600px);
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 100;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    // transition: 0.5s;
                  }
                }
                span {
                  text-align: center;
                  font-size: px2vw(14px);
                  font-family: PingFangSC, PingFangSC-Regular;
                  font-weight: 400;
                  color: #999999;
                }
              }
            }
          }
        }
        .card_right {
          width: 49%;
          background: #ffffff;
          border-radius: 4px;
          .card_right_top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: px2vw(20px);
            padding-bottom: px2vw(10px);
            .card_right_top_title {
              height: 24%;
              display: flex;
              align-items: center;
              // padding-left: px2vw(20px);
              img {
                width: px2vw(26px);
                height: px2vw(26px);
              }
              p {
                margin: 0;
                font-size: 18px;
                font-family: PingFangSC, PingFangSC-Medium;
                font-weight: 500;
                text-align: left;
                color: #666666;
                margin-left: px2vw(12px);
              }
            }
          }

          .card_right_bot {
            padding-left: px2vw(20px);
            padding-right: px2vw(38px);
            height: 76%;
            overflow: auto;
            position: relative;
            .item_right {
              display: flex;
              p {
                width: 80%;
                font-size: px2vw(16px);
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                color: #333333;
                margin: 0;
                padding: px2vw(7px) 0;
              }
              span {
                width: 20%;
                font-size: px2vw(16px);
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                color: #1492ff;
              }
            }
            .form-empty {
              position: absolute;
              left: 50%;
              top: 45px;
              transform: translateX(-50%);
            }
          }
        }
        // .top_left_qr_two{
        //   height: 100%;
        //   display: flex;
        //   width: 100%;
        //   .project_two{
        //     width: calc(100% - 254px);
        //     padding: 23px 20px 23px 20px;
        //   }
        // }
      }
    }
    .echarts {
      height: calc(100% - 278px);
      background-color: #fff;
      border-radius: 4px;
      position: relative;
      width: 100%;
    }
  }
}
/deep/.dv-scroll-board .row-item {
  color: #0169d4;
}
/deep/.dv-scroll-board .row-item .ceil {
  white-space: normal;
  text-overflow: clip;
  overflow: hidden;
  height: 100%;
  line-height: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  font-size: px2vw(14px);
}
.card_right_bot /deep/.el-table td,
.el-table th.is-leaf {
  border: 0;
}
.card_right_bot /deep/.el-table__row {
  height: 39px;
}
.rowBoxfx {
  display: flex;
  align-items: center;
  height: 40px;
  span {
    width: 20%;
  }
  p {
    margin: 0;
  }
}
.YjText {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: red;
  font-size: 40px;
}
.tableItem {
  margin-bottom: 20px;
}
.itemDialog /deep/.el-dialog__body {
  // max-height: 440px;
  max-height: 70vh;
  min-height: 20vh;

  overflow: auto;
}
.itmeMore{
  display: flex;
  justify-content: space-between;
  height: 100%;
}
/deep/.el-step.is-vertical{
  height: 18%!important;
}
</style>
